/**
 * Created by yujianfu on 2016/11/10.
 */
import React, { Component, PropTypes } from 'react'
import { Card, Icon, Modal, Form, Input, message, Button } from 'antd'
import Styles from './Index.less'
import { fetchPost } from './../../../../../utils/request'

const FormItem = Form.Item

class BasicInfo extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      stepType: props.stepType,
      data: [],
      message: '',
      timer: null,
      visible: false,
      type: null,
    }
  }

  componentWillReceiveProps (props) {
    if (this.state.userId !== props.userId) {
      this.setState({
        userId: props.userId,
        tradeNo: props.tradeNo,
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount () {
    this.getData()
  }

  componentWillUnmount () {
    clearTimeout(this.state.timer)
  }

  getData () {
    if (this.state.tradeNo != null) {
      fetchPost(`/collection/v2/user/base/info`, { 'tradeNo': this.state.tradeNo }).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            data: json.data.list
          })
        } else {
          this.setState({
            message: json.msg,
            data: []
          })
        }
      })
    } else {
      this.setState({
        data: []
      })
    }
  }

  createContent () {
    let data = this.state.data
    let self = this
    let content = []
    if (data != null && data.length > 0) {
      data.map(function (item) {
        if (item.flag === 'basic') {
          let value = item.value
          if (value == null) {
            value = '--'
          }
          content.push(
            <div key={item.name} className={Styles.content}>
              <span style={{ width: '20%' }}>{item.name}</span>
              :
              <span style={{ width: '80%', paddingLeft: 5 }}>{value}</span>
            </div>
          )
        }
      })
    }
    return content
  }

  getTitle () {
    let data = this.state.data
    if (!data || !data.length) {
      return 'non data'
    }

    return 'person profile info'
  }

  message () {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
    }

    return (
      <div className={Styles.detailModule}>
        <Card extra={this.message()} bodyStyle={{ padding: 0 }} noHovering={true}>
          {this.createContent()}
        </Card>
      </div>

    )
  }
}

BasicInfo = Form.create()(BasicInfo)
export default BasicInfo
